import * as THREE from 'three'
import { Base } from '../base.js'
let is = false
export class CarGame extends Base {
    keys:string[] = []
    player: THREE.Mesh | null = null
    ray = new THREE.Raycaster(new THREE.Vector3(), new THREE.Vector3( 0, 1, 0 ), 0, 10)
    constructor(elelemtId:string) {
        super(elelemtId)
    }
    initWasd() {
        document.onkeydown = (e) => {
            if (e.key.match(/^(w|a|s|d)$/i)) {
                !this.keys.includes(e.key) && this.keys.push(e.key)
            }
        }
        document.onkeyup = (e) => {
            this.keys.splice(this.keys.indexOf(e.key), 1)
        }
    }
    onRender() {
        const {keys, player, ray, scene, controls} = this
       
        const step = 0.1
        if (player) {
            const p = player.position
            ray.ray.origin.set(p.x, p.y - 1, p.z )
            const intersections = ray.intersectObjects( scene.children.filter(v => v.name !== 'player'), false )
            if (intersections.length === 0) {
                player.position.y -= step * 2
            }
            if (keys.length > 0) {
                if (keys.includes('w')) {
                    player.translateZ(-step)
                }
                if (keys.includes('a')) {
                    player.rotateY(THREE.MathUtils.degToRad(1))
                }
                if (keys.includes('d')) {
                    player.rotateY(-THREE.MathUtils.degToRad(1))
                }
                if (keys.includes('s')) {
                    player.translateZ(step)
                }
            }
            controls.target.copy(p)
            
        }
        
    }
    initPlayer() {
        const mesh = new THREE.Mesh(
            new THREE.BoxGeometry(2, 2, 6),
            new THREE.MeshPhongMaterial({ color: 0xffffff})
        )
        const headerMesh = new THREE.Mesh(
            new THREE.BoxGeometry(1, 1, 1),
            new THREE.MeshPhongMaterial({ color: 0xff9900})
        )
        headerMesh.position.set(0, 1, -2)
        mesh.add(headerMesh)
        mesh.name = 'player'
        mesh.position.y = 10
        this.player = mesh
        this.scene.add(mesh)
    }
    initMap() {
        this.camera.position.set(0, 5, 15)
        const map = new THREE.TextureLoader().load('./images/plaster.jpg')
        map.wrapS = THREE.RepeatWrapping
        map.wrapT = THREE.RepeatWrapping
        map.repeat.set(8, 8)

        const material = new THREE.MeshPhongMaterial({ map: map, side: THREE.DoubleSide})

        const mesh = new THREE.Mesh(
            new THREE.BoxGeometry(50, 1, 50),
            material
        )
        mesh.position.y = -2
        mesh.name = 'map1'
        this.scene.add(mesh)
        
        const mesh2 = new THREE.Mesh(
            new THREE.BoxGeometry(10, 1, 20),
            material
        )
        mesh2.position.setZ(-35)
        mesh2.position.y = -2
        mesh.name = 'map2'
        this.scene.add(mesh2)

        const mesh3 = new THREE.Mesh(
            new THREE.BoxGeometry(10, 1, 20),
            material
        )
        mesh3.position.set(0, -10, -55)
        mesh.name = 'map3'
        this.scene.add(mesh3)
    }
    async initObject() {
        this.initMap()
        this.initPlayer()
        this.initWasd()
        
    }
}